<template>
  <div class="login-form">
    <h5 class="text-center">聊天登陆</h5>
    <hr>
    <b-form @submit.prevent="onSubmit">
      <b-alert variant="danger"
               :show="hasError">{{ error }}</b-alert>

      <b-form-group id="userInputGroup"
                    label="姓名"
                    label-for="userInput">
        <b-form-input id="userInput"
                      type="text"
                      placeholder="输入你的名字"
                      v-model="userId"
                      autocomplete="off"
                      :disabled="loading"
                      required>
        </b-form-input>
      </b-form-group>

      <b-button type="submit"
                variant="primary"
                class="ld-ext-right"
                v-bind:class="{ running: loading }"
                :disabled="isValid">
        登陆 <div class="ld ld-ring ld-spin"></div>
      </b-button>
    </b-form>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: "LoginForm",
  data() {
    return {
      userId: '',
    }
  },
  computed: {
    isValid: function() {
      const result = this.userId.length < 3;
      return result ? result : this.loading
    },
    ...mapState([
      'loading',
      'error'
    ]),
    ...mapGetters([
      'hasError'
    ])
  }
}
</script>

<style scoped>

</style>
